<template>
  <div class="declareDetail-content">
          <div class="declareDetailBox">
              <div class="headerBox">
                  <div class="line"></div>
                  <div class="title">职业病危害申报详情</div>
              </div>
              <div class="tabBox display-fx-center">
               <div class="tabBoxLi" :style="{'width': item.width + 'px'}" :class="{active:tabIndex == index}" v-for="(item,index) in tabList" :key="index" @click="tabSelect(index)">{{item.name}}</div>  
              </div>  
  
                <elementary v-show="tabIndex === 0" :infoData="infoData.basicInfo"></elementary>
                <majorProduct v-show="tabIndex === 1" :infoData="infoData.productList"></majorProduct> 
                <hazardFactors v-show="tabIndex === 2" :infoData="infoData"></hazardFactors>
                <hazardDetection v-show="tabIndex === 3" :infoData="infoData"></hazardDetection>
                <healthSupervision v-show="tabIndex === 4" :infoData="infoData"></healthSupervision>
                <downloadReport v-show="tabIndex === 5" :infoData="infoData.basicInfo"></downloadReport>
                

              <div class="footer-btn">
                   <el-button class="btn" @click="goBackBtn">返回</el-button>
              </div>
          </div>    
  </div>
</template>

<script>  
  import { getHazardReport} from "@/api/zhangping/occupational";
  import elementary from './components/elementary.vue' 
  import majorProduct from './components/major-product.vue' 
  import hazardFactors from './components/hazardFactors.vue' 
  import hazardDetection from './components/hazardDetection.vue' 
  import downloadReport from './components/downloadReport.vue' 
  import healthSupervision from './components/healthSupervision.vue'
  export default {
    components:{ elementary,
                 majorProduct,
                 hazardFactors,
                 hazardDetection,
                 downloadReport,
                 healthSupervision
               },
    data() {  
      return {
         infoData:{
            basicInfo:{},
            productList:[]
         },
         tabList:[{name:'基本信息',width:121},{name:'主要产品',width:121},{name:'职业病危害因素种类',width:212},
                  {name:'职业病危害因素检测情况',width:246},{name:'职业健康监护开展情况',width:229},
                  {name:'查看申报表',width:193}],
          tabIndex:0,
          queryParams:{
              id:''
            }
         };
    },
    created() {
      this.queryParams.id = this.$route.query.id
      this.getHazardReportFn()
    },
    methods: {
        getHazardReportFn(){
              getHazardReport(this.queryParams.id).then(res=>{
                      if(res.code == 200){
                          this.infoData = res.data
                      }else{
                          this.$message.error(res.msg);  
                      }    
              })
         }, 
        tabSelect(index){
            this.tabIndex = index
        },
        goBackBtn(){
          this.$router.back()
        },
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
        .declareDetail-content{
            overflow-y: auto;
            position: relative;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            height: calc( 100vh - 66px - 128px);
            display: flex;
            flex-direction: column;
            .declareDetailBox{
                    max-width: 1122px;
                    margin: 0 auto;
                    padding-bottom:40px;

              }
            .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                // margin-top:40px;/
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
            .tabBox{
                 font-size: 14px; 
                 width: 100%;
                 border: solid 1px#D3D8E2; 
                 height: 38px;
                 line-height: 38px;
                 color: #797C84;
                .tabBoxLi{
                    height: 100%;
                    border-right: solid 1px #D3D8E2;
                    text-align: center;
                    cursor: pointer;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // display: -webkit-box;
                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 1;
                }   
                .tabBoxLi:nth-last-child(1){
                     border-right: none;
                }  
            }
     
        }
       .footer-btn{
                 width: 100%;
                 background: #FFFFFF;
                 height: 78px;
                 position: fixed;
                 bottom: 0;
                 right: 0;
                .btn{
                   position: fixed;
                   bottom: 20px;
                   right: 20px;    
                }
          }
      .active{
          color: #484848;
          background: #F4F8FF;
      }
</style>
